import React from 'react';
import {inject, observer} from 'mobx-react';
import { Browser } from 'weaver-mobile-page'
import { withRouter } from 'react-router-dom';
import { Tools , Flex, WhiteSpace ,SearchBar,Icon, NavBar, Picker, List, DatePicker, SwipeAction} from 'weaver-mobile';
import {toJS} from 'mobx';
import {ListViewPage, TabPage, SearchAdvanced} from 'weaver-mobile-page';
import ListIcon from '../../../public/listicon'
import  '../../../style/goal/goalLevelList.less'
const getLabel = Tools.getLabel;
@inject('goalLevelStore','goalCommonStore')
@withRouter
@observer
class GoalLevelList extends React.Component {

    constructor(props){
        super(props);
        this.state={
        }
        this.store = this.props.goalLevelStore;

    }
    prefixCls = 'wm-demo-list-view-page'
    
    componentWillMount(){
        const {goalLevelStore:{setOrgData},condtype,typeId,orgId} = this.props;
        setOrgData(condtype,typeId,orgId)
        this.store.goalListPage({});
    }

    componentWillReceiveProps(newProps){
        if((this.props.locationKey != newProps.locationKey && newProps.goalId != this.props.goalId)){
            const {goalLevelStore:{setOrgData},condtype,typeId,orgId} = newProps; 
            setOrgData(condtype,typeId,orgId)
            let params ={supid:newProps.goalId}
            this.store.goalListPage(params);
        }
    }

    componentDidMount(){

    }

    //列表点击
    itemClick = (rowData)=>{
        let {id,name} = rowData;
        let params = {supid:id,name}
        this.store.onClickItem(params);
    }

    //查看详情
    viewDetail = (id,event) =>{
      event.preventDefault()
      event.stopPropagation()
      window.openAppLink(null, id, "wrlgoal", null, null)
    //   this.props.history.push("/goalHome/goalDetail?id=" + id)
    }

    /**
     * 右滑操作
     */
    getSwipeActionProps = () => {
        let {canCreate,condtype} = this.props
        let right = [];
        if(condtype && condtype == 2){
            if(canCreate){
                right.push(
                    {
                        text: getLabel(365, "新建"),
                        onPress: (data) => {
                            this.props.history.push("/goalHome/goalAdd?parentid=" + data.id+"&parentName=" + data.name)
                        },
                        className: `${this.prefixCls}-detail`,
                        style: { backgroundColor: '#108ee9', color: 'white', padding: '0 15px' }
                    }
                )
            }
        }else{
            right.push(
                {
                    text: getLabel(365, "新建"),
                    onPress: (data) => {
                        this.props.history.push("/goalHome/goalAdd?parentid=" + data.id+"&parentName=" + data.name)
                    },
                    className: `${this.prefixCls}-detail`,
                    style: { backgroundColor: '#108ee9', color: 'white', padding: '0 15px' }
                }
            )
        }
        right.push(
            {
                text: getLabel(22045,'详情'),
                onPress: (data) => {
                  this.props.history.push("/goalHome/goalDetail?id=" + data.id)
                },
                className: `${this.prefixCls}-detail`,
                style: { backgroundColor: 'rgba(245, 154, 35, 1)', color: 'white', padding: '0 15px' }
            },
        )
        return {right};
      }


      getTemplate = () => {
        return {
            default: [{
                key: 'col_1',
                render: (data) => {
                    const {id,name, principalidspan, target,tunit} = data;
                    return (
                        <div>
                            <Flex>  
                                {/* <Flex.Item  style={{flex:1}}><Icon type="play" size="xss" color='#000' /></Flex.Item> */}
                                <Flex.Item style={{flex:1}}>
                                        {/* <div className="workrelate_goal_mobile_List_circle">
                                            <div className="workrelate_goal_mobile_List_triangle"></div>
                                        </div> */}
                                        <ListIcon type = "progress"></ListIcon>
                                </Flex.Item>
                                <Flex.Item  style={{flex:10}}>
                                    <Flex className="content-list-item">{name}</Flex>
                                    <Flex><span style={{color:'#a6a6a6'}}>{principalidspan}</span></Flex>
                                      <Flex><span style={{color:'#4878D3'}} onClick={(event)=>this.viewDetail(id,event)}>{getLabel(507890,'查看详细') }</span></Flex>
                                </Flex.Item>
                                <Flex.Item  style={{flex:4}}><span style={{float:'right'}}>{target}{tunit}</span></Flex.Item>
                                <Flex.Item  style={{flex:2}}><Icon type="right" size={"md"} color={'#a6a6a6'} /></Flex.Item>
                            </Flex>
                          
                            <WhiteSpace/>
                        </div>
                    )
                }
            }]
        }
    }

    render(){
        const {list} = this.store;
        return (
            <div className="workrelate_goal_mobile_list" style={{paddingTop:'5px'}}>
                <ListViewPage.Normal
                heightSpace = {47}
                store={list}
                getTemplate={this.getTemplate}
                withSwipeAction
                swipeActionProps={this.getSwipeActionProps()}
                onRowClick={(rowData) => this.itemClick(rowData)}
                />
                 {/* <ListIcon type = "complete"></ListIcon> */}
            </div>
        )
    }


}

export default GoalLevelList; 